<template>
	<view>
		<view class="header" :style="{background: bgcolor, 'box-shadow': hasShadow ? '0 2px 4px 0 rgba(0,0,0,0.03)' : ''}">
			<image v-show="hasArrow" class="back" @click="handleBeforePage" src="/static/icon1/20.png" mode="aspectFill"></image>
			<view class="title">{{ headerTitle }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//导航栏标题
			headerTitle: {
				type: String,
				default: ''	,
			},
			//导航栏标题
			bgcolor: {
				type: String,
				default: '#FFFFFF'	,
			},
			//是否带阴影
			hasShadow: {
				type: Boolean,
				default: true,
			},
			//是否有箭头
			hasArrow: {
				type: Boolean,
				default: true,
			}
		},
		methods: {
			// 返回上一页
			handleBeforePage () {
				// 关闭当前页面，返回上一页面
				uni.navigateBack({  delta: 1 })
				console.log('关闭当前页面，返回上一页面')
			},
		},
	}
</script>

<style lang="less">
.header {
	// border: 1px solid #000000;
	// box-shadow: 0 2px 4px 0 rgba(0,0,0,0.03);
	position: fixed;
	top: 0;
	z-index: 10;
	height: 88rpx;
	width: 100vw;
	display: flex;
	align-items: center;
	justify-content: center;
	
	& > .back {
		position: absolute;
		left: 30rpx;
		width: 24upx;
		height: 42upx;
	}

	& > .title {
		text-align: center;
		font-size: 17px;
		color: #402110;
		font-family: PingFangSC-Regular;
	}
}
</style>
